<template>
  <div class="Index-box">
    <div class="TeacherInformation">
      <!-- 公用title -->
      <div class="tiTletopBox">
        <div class="Title overallSituationTitle">教师信息</div>
        <div class="tiTletopBoxz">
          <div>下次更新时间</div>
          <div>2024-12-12</div>
        </div>
        <div class="tiTletopBoxdetails" @click="addJsxx">详情</div>
        <div class="tiTletopBoxTubiao"></div>
      </div>
      <div class="TeacherInformation1-box">
        <div class="jsrs">教室人数</div>
        <div class="kapianBox">
          <div class="kapianBoxItem">1</div>
          <div class="kapianBoxItem">2</div>
          <div class="kapianBoxItem">2</div>
          <div class="kapianBoxItem">2</div>
        </div>
      </div>
      <div class="TeacherInformation2-box">
        <!-- 金字塔图 -->
        <pyramidEcharts :pyramidList="pyramidList" />
      </div>
      <div class="TeacherInformation3-box">
        <div class="formation3left">
          <!-- 饼图 -->
          <div class="formation3Echarts">
            <pieChartEcahrts :pieChartObj="pieChartObj1" />
          </div>
          <div class="formation3bon">
            <div class="formation3bonitem1">
              <div class="bonitemtitle">教师</div>
              <div class="bonitemshu">
                00
                <div class="danwei">人</div>
              </div>
            </div>
            <div class="formation3bonitem2">
              <div class="bonitemtitle">教辅</div>
              <div class="bonitemshu">
                00
                <div class="danwei">人</div>
              </div>
            </div>
            <div class="formation3bonitem3">
              <div class="bonitemtitle">校医</div>
              <div class="bonitemshu">
                00
                <div class="danwei">人</div>
              </div>
            </div>
            <div class="formation3bonitem4">
              <div class="bonitemtitle">辅助</div>
              <div class="bonitemshu">
                00
                <div class="danwei">人</div>
              </div>
            </div>
          </div>
        </div>
        <div class="formation3right">
          <div class="nansheng">
            <div class="nanhiaoshiBox">
              <div class="TEFleft">男教师</div>
              <div class="nanTEFright">50%</div>
            </div>
            <sexRatioEcharts :sexRatioList="sexRatioList" />
          </div>
          <div class="nvseng">
            <div class="nanhiaoshiBox">
              <div class="TEFleft">女教师</div>
              <div class="nvTEFright">50%</div>
            </div>
            <sexRatioEcharts :sexRatioList="sexRatioList1" />
          </div>
        </div>
      </div>
      <div class="TeacherInformation4-box">
        <barChartEcharts :barChartList="barChartList1" />
      </div>
    </div>
    <div class="RefereeStatistics">
      <!-- 公用title -->
      <div class="tiTletopBox">
        <div class="Title overallSituationTitle">裁判统计</div>
        <div class="tiTletopBoxz">
          <div>下次更新时间</div>
          <div>2024-12-12</div>
        </div>
      </div>
      <div class="TeacherInformation1-box">
        <div class="jsrs">裁判人数</div>
        <div class="kapianBox">
          <div class="kapianBoxItem">1</div>
          <div class="kapianBoxItem">2</div>
          <div class="kapianBoxItem">2</div>
          <div class="kapianBoxItem">2</div>
        </div>
      </div>
      <div class="bingtuEchBox">
        <!-- 背景图 -->
        <div class="BgImageBox"></div>
        <pieChartEcahrts4 :pieChartObj="pieChartObj" />
      </div>
      <div class="duibiEchBox">
        <div class="duibiEchBox-top">
          <div class="topLeft">
            <div class="topLeft1">男裁判:</div>
            <div class="topLeft2">10</div>
            <div class="topLeft3">%</div>
            <div class="topLeft4">10000</div>
            <div class="topLeft5">人</div>
          </div>
          <div class="topright">
            <div class="topRight1">女裁判:</div>
            <div class="topRight2">10</div>
            <div class="topRight3">%</div>
            <div class="topRight4">10000</div>
            <div class="topRight5">人</div>
          </div>
        </div>
        <contrastEcahrts />
      </div>
    </div>
  </div>
</template>
<script setup>
import pieChartEcahrts4 from "@/components/pieChartEcahrtsgongyong.vue"
import barChartEcharts from "@/components/barChartEcharts.vue"
import pyramidEcharts from "@/components/pyramidEcharts.vue"
import pieChartEcahrts from "@/components/pieChartEcahrtsCun.vue"
import sexRatioEcharts from "@/components/sexRatioEcharts.vue"
import contrastEcahrts from "@/components/contrastEcahrts.vue"
import { ue4 } from "@/utils/unrealJs"

const barChartList1 = ref({
  xData: ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级"],
  seriesObj: {
    教师详情: [10, 20, 30, 40, 50, 60],
    学生详情: [20, 30, 40, 50, 60, 70]
  },
  // 从浅到深(先量上面再量下面)
  colorList: {
    教师详情: ["rgba(66, 165, 245)", "rgba(68, 217, 253)"],
    学生详情: ["#41D348", "#41D348"]
  },
  danwei: "单位(人)",
  isShowlegend: true
})
const pyramidList = ref([
  { value: 1, name: "正高级教师" },
  { value: 2, name: "高级教师" },
  { value: 3, name: "一级教师" },
  { value: 4, name: "二级教师" },
  { value: 5, name: "三级教师" }
])
const sexRatioList = ref({
  name: "男教师",
  value: 50
})
const sexRatioList1 = ref({
  name: "女教师",
  value: 50
})
const pieChartObj = ref({
  radius: ["50%", "65%"],
  center: ["25%", "51%"],
  danwei: "千米/小时",
  pieChartList: [
    {
      value: 100,
      name: "现有学校",
      age: 18
    },
    { value: 80, name: "在建学校", age: 18 },
    { value: 60, name: "带规划学校", age: 18 }
  ]
})
const pieChartObj1 = ref({
  radius: ["50%", "80%"],
  center: ["50%", "50%"],
  pieChartList: [
    {
      value: 100,
      name: "现有学校"
    },
    { value: 80, name: "在建学校" },
    { value: 60, name: "带规划学校" }
  ]
})
// 教师信息详情
const addJsxx = () => {
  ue4("JsTeacherInformationDetails", { isClose: true })
}
</script>
<style scoped lang="less">
.TeacherInformation1-box {
  margin: auto;
  margin-top: 10px;
  width: 370px;
  height: 50px;
  background: url("@/assets/TeacherInformation/BJ_JSRS.svg") no-repeat center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  .jsrs {
    font-size: 12px;
    margin-left: 75px;
    width: 50px;
    height: 20px;
    line-height: 20px;
    color: #ffffff;
    // background-color: red;
  }
  .kapianBox {
    width: 180px;
    height: 25px;
    line-height: 25px;
    display: flex;
    flex-direction: row-reverse; /* 设置主轴方向为从右到左 */
    .kapianBoxItem {
      margin-right: 2px;
      width: 20px;
      line-height: 25px;
      text-align: center;
      height: 25px;
      color: #fff;
      font-size: 18px;
      background-color: pink;
      background: url("@/assets/TeacherInformation/xiaokuang.svg") no-repeat
        center;
      background-size: 100% 100%;
    }
  }
}
.TeacherInformation {
  width: 100%;
  height: 620px;
  background: url("@/assets/TeacherInformation/XXC_JSXX.svg") no-repeat center;
  background-size: 100% 100%;

  .TeacherInformation2-box {
    margin: auto;
    width: 370px;
    height: 135px;
    margin-top: 30px;
    // background-color: red;
  }
  .TeacherInformation3-box {
    margin: auto;
    width: 370px;
    height: 135px;
    margin-top: 30px;
    // background-color: red;
    display: flex;
    .formation3left {
      box-sizing: border-box;
      width: 50%;
      height: 100%;
      // background-color: pink;
      .formation3Echarts {
        margin: auto;
        margin-top: 10px;
        width: 74px;
        height: 74px;
      }
      .formation3bon {
        width: 180px;
        height: 50px;
        display: flex;
        flex-wrap: wrap;
        .formation3bonitem1 {
          margin-top: 5px;
          width: 90px;
          height: 20px;
          background: url("@/assets/TeacherInformation/BJ_LANSE.svg") no-repeat
            center;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
        }
        .formation3bonitem2 {
          margin-top: 5px;
          width: 90px;
          height: 20px;
          background: url("@/assets/TeacherInformation/BJ_HUANGSE.svg")
            no-repeat center;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
        }
        .formation3bonitem3 {
          margin-top: 5px;
          width: 90px;
          height: 20px;
          background: url("@/assets/TeacherInformation/BJ_LVSE.svg") no-repeat
            center;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
        }
        .formation3bonitem4 {
          margin-top: 5px;
          width: 90px;
          height: 20px;
          background: url("@/assets/TeacherInformation/BJ_CHENGSE.svg")
            no-repeat center;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
        }
        .bonitemtitle {
          margin-left: 10px;
          width: 30px;
          font-size: 12px;
          white-space: nowrap; /*规定段落中的文本不进行换行 */
          color: #ffffff;
        }
        .bonitemshu {
          white-space: nowrap; /*规定段落中的文本不进行换行 */
          margin-left: 5px;
          text-align: right;
          // width: 60px;
          display: flex;
          font-size: 14px;
          color: #fff;
          // color: rgba(83, 202, 255);
          .danwei {
            color: #fff;
            margin-top: 4px;
            font-size: 10px;
          }
        }
      }
    }
    .formation3right {
      box-sizing: border-box;
      width: 50%;
      height: 100%;
      .nansheng {
        width: 100%;
        height: 50%;
        position: relative;
      }
      .nanhiaoshiBox {
        top: 0;
        position: absolute;
        width: 100%;
        height: 30px;
        display: flex;
        .TEFleft {
          width: 30%;
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          color: #caf0ff;
        }
        .nanTEFright {
          width: 70%;
          height: 30px;
          line-height: 30px;
          font-size: 16px;
          text-align: right;
          color: #caf0ff;
          font-weight: 600;
        }
        .nvTEFright {
          width: 70%;
          height: 30px;
          line-height: 30px;
          font-size: 16px;
          text-align: right;
          color: #caf0ff;
          font-weight: 600;
        }
      }
      .nvseng {
        width: 100%;
        height: 50%;
        position: relative;
      }
    }
  }
  .TeacherInformation4-box {
    margin: auto;
    width: 370px;
    height: 140px;
    margin-top: 30px;
  }
}
.RefereeStatistics {
  margin-top: 11px;
  width: 100%;
  height: 338px;
  background: url("@/assets/TeacherInformation/XXC_CPTJ.svg") no-repeat center;
  background-size: 100% 100%;
  .bingtuEchBox {
    margin-top: 20px;
    width: 100%;
    height: 150px;
    position: relative;
    .BgImageBox {
      position: absolute;
      left: 0%;
      top: 0%;
      width: 50%;
      height: 100%;
      // background-color: red;
      background: url("@/assets/TeacherInformation/BJ_HUANXINGTU2.svg")
        no-repeat center;
      background-size: 100% 100%;
    }
    // background-color: red;
  }
  .duibiEchBox {
    width: 100%;
    height: 50px;
    top: 0;
    position: relative;
    .duibiEchBox-top {
      position: absolute;
      height: 50px;
      width: 100%;
      height: 30px;
      display: flex;
      font-size: 12px;
      align-items: center;
      .topLeft {
        width: 50%;
        display: flex;
        font-size: 12px;
        align-items: center;
        white-space: nowrap; /*规定段落中的文本不进行换行 */
        .topLeft1 {
          margin-left: 40px;
          color: rgba(202, 240, 255);
        }
        .topLeft2 {
          font-size: 16px;
          font-weight: 600;
          margin-left: 5px;
          color: rgba(83, 202, 255);
        }
        .topLeft3 {
          margin-left: 5px;
          color: rgba(202, 240, 255);
        }
        .topLeft4 {
          font-size: 16px;
          font-weight: 600;
          margin-left: 5px;
          color: rgba(83, 202, 255);
        }
        .topLeft5 {
          margin-left: 5px;
          color: rgba(202, 240, 255);
        }
      }
      .topright {
        width: 50%;
        display: flex;
        font-size: 12px;
        align-items: center;
        justify-content: flex-end;
        white-space: nowrap; /*规定段落中的文本不进行换行 */
        .topRight1 {
          color: rgba(202, 240, 255);
        }
        .topRight2 {
          font-size: 16px;
          font-weight: 600;
          margin-left: 5px;
          color: rgba(255, 167, 38);
        }
        .topRight3 {
          margin-left: 5px;
          color: rgba(202, 240, 255);
        }
        .topRight4 {
          font-size: 16px;
          font-weight: 600;
          margin-left: 5px;
          color: rgba(255, 167, 38);
        }
        .topRight5 {
          margin-right: 40px;
          margin-left: 5px;
          color: rgba(202, 240, 255);
        }
      }
    }
  }
}
</style>
